<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="icon" href="http://dev.admin.front.tea.p.yufeiworld.com/favicon.ico">
</head>
<body>
<div id="app" style="width: 1000px; margin: 0 auto">
    <div style="margin-top: 20px;">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 内容管理
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-divider></el-divider>
    <el-card class="box-card">
        <div style="margin-bottom: 20px;">
            <el-row>
                <el-button type="primary" size="mini" @click="openDialog()">新增内容</el-button>
            </el-row>
        </div>

        <div>
            <el-table :data="tableData" border>
                <el-table-column prop="title" label="标题" width="200" align="center"></el-table-column>
                <el-table-column prop="description" label="作者" align="center">admin</el-table-column>
                <el-table-column prop="sort" label="分类" :formatter="formatCategory" width="150"
                                 align="center"></el-table-column>
                <el-table-column prop="keywords" label="标签" width="100" align="center"
                                 :formatter="formatKeyWords"></el-table-column>
                <el-table-column prop="gmtCreate" label="发布时间" :formatter="formatDate" width="170"
                                 align="center"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini"
                                   @click="openDialog(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                   @click="openDeleteConfirm(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </el-card>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                formLabelWidth: '120px',
                total: 0,
                page: 1,
                pageSize: 10
            }
        },
        methods: {
            //格式化分类
            formatCategory(row, column, cellValue, index) {
                let categoryId = row.categoryId;
                switch (categoryId) {
                    case 1 :
                        return '花茶';
                    case 2 :
                        return '红茶';
                    case 3 :
                        return '绿茶';
                    case 4 :
                        return '常识';
                    case 5 :
                        return '功效';
                }
            },
            //格式化标签
            formatKeyWords(row, column, cellValue, index) {
                let labelNames = [];
                //将json字符转为json对象
                let keywordsData = JSON.parse(row.keywords);
                for (let i = 0; i < keywordsData.length; i++) {
                    //获取标签名
                    let labelName = keywordsData[i].name;
                    //每个标签名放入数组中
                    labelNames.push(labelName);
                }
                //数组中的每个值，按照逗号进行分割显示为字符串
                return labelNames.join(",");
            },
            //格式化时间显示
            formatDate(row, column, cellValue, index) {
                let date = new Date(row.gmtCreate)
                const year = date.getFullYear(); // 获取年份
                const month = date.getMonth() + 1; // 获取月份，需要加上1
                const day = date.getDate(); // 获取日期
                const hours = date.getHours(); // 获取小时数
                const minutes = date.getMinutes(); // 获取分钟数
                const seconds = date.getSeconds(); // 获取秒数
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            //加载内容列表
            loadContentList(page, pageSize) {
                axios.get('/content/list?page=' + page + '&pageSize=' + pageSize).then(function (response) {
                    v.tableData = response.data.data.list
                    v.total = response.data.data.total
                })
            },
            //跳转到新内容编辑窗口
            openDialog(content) {
                let urlAddress = content ? `/edit.html?id=${content.id}` : "/edit.html";
                window.location.href = urlAddress;
            },
            //打开删除提示
            openDeleteConfirm(content) {
                let message = '此操作将永久删除【' + content.title + '】内容，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    v.handleDelete(content)
                }).catch(() => {
                });
            },
            //删除相册
            handleDelete(content) {
                axios.post('/content/' + content.id + '/delete').then(function (response) {
                    if (response.data.code === 0) {
                        v.$message({
                            message: '删除内容成功！',
                            type: 'success'
                        });
                        v.loadContentList(v.page, v.pageSize)
                    } else {
                        v.$message.error(response.data.data)
                    }
                })
            },
            //更改分页
            handleCurrentChange(val) {
                v.page = val
                v.loadContentList(v.page, v.pageSize)
            }
        },
        mounted() {
            //加载相册列表
            this.loadContentList(this.page, this.pageSize)
        }
    })
</script>
</html>